  <!DOCTYPE html>
<html>
	<head>
		<title>SubRows in DataTable - Size to Data</title>
		<link rel="stylesheet" href="../../../../codebase/webix.css" type="text/css" charset="utf-8">
		<script src="../../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../../common/samples.css">
		<script src="../../common/testdata.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
        .multiline{
            line-height: 30px !important;
        }
        </style>
	</head>
	<body>
		<div class='header_comment'>Sub-rows in DataTable, auto-height</div>
		<div id="testA"></div>

		<script type="text/javascript" charset="utf-8">

		webix.ready(function(){
			webix.ui({
				container:"testA",
				view:"datatable",
				subrow:"#details#",
				columns:[
					{ id:"title",	header:"Title", 
						template:"{common.subrow()} #title#", width:220 },
					{ id:"year",	header:"Year", 		width:100, sort:"int"},
					{ id:"votes",	header:"Votes", 	width:100,	sort:"int"}
				],
				subRowHeight:"auto",
				autoheight:true,
				autowidth:true,
				data:[
					{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, 
						details:"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text "},
					{ id:2, title:"The Godfather", year:1972, votes:511495, 
						details:""},
					{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, 
						details:"Short text"}
				]
			});	
		});		
		</script>
	</body>
</html>